/* 
    1. 声明立即执行函数，创建封闭的作用域空间
    2. 声明构造函数，添加原型extend函数
    3. 将 构造函数 暴露给window对象
    4. 声明初始化函数
    5. 规定参数，书写内容代码
    6. 抽离
*/

;
(function (w) {
    function Swiper(selector, setting) {
        // 默认配置
        this.setting = Object.assign({
            loop: false,
            autoplay: false,
            duration: 3000
        }, setting);

        // 获取容器
        this.box = document.querySelector(selector);
        // 获取运动元素
        this.ele = this.box.children[0];
        // 声明计数器
        this.count = 0;
        // 声明一张图片的宽度
        this.w = 0;
        // 获取子元素个数
        this.length = 0;


        // 执行初始化函数，创建时实例借用的原型方法
        this.init();
    }


    Swiper.prototype.extend = function (obj) {
        for (var i in obj) {
            // this 
            if (!(i in this)) {
                this[i] = obj[i];
            }
        }
    }

    Swiper.prototype.extend({
        // 所有初始化函数的集合
        init() {
            // 图片初始化宽度
            this.initWidth();
            // 初始化点击事件
            this.initArrow();
            // 判断用户是否传入了小点的选择器
            if(this.setting.pagination){
                this.initDots();
            }
            // 判断是否开启自动轮播
            if(this.setting.autoplay){
                this.auto();
            }
        },
        // 图片初始化宽度
        initWidth() {
            // 判断是否是无缝，如果是，复制第一个内容放在运动元素最后
            if (this.setting.loop) {
                // 复制第一个，放到最后一个
                var cloneNode = this.ele.children[0].cloneNode(true);
                this.ele.append(cloneNode);
            }
            // 宽度 -> swiper-slide 的个数
            var length = this.ele.children.length;
            this.length = length;

            // 运动元素的宽度
            this.ele.style.width = length * 100 + "%";
            // 所有子元素的宽度
            for (var i = 0; i < length; i++) {
                this.ele.children[i].style.width = 100 / length + "%";
            }
            // 赋值一张图片的宽度
            this.w = this.ele.children[0].offsetWidth;
        },
        // 导航键
        initArrow() {
            var arrows = document.querySelectorAll(".arrow");
            // 向左
            arrows[0].onclick = function () {
                // 临界值判断
                if (this.count == 0) {
                    // 是否是无缝循环
                    if (this.setting.loop) {
                        // 将运动元素定位至最后一张，往前走
                        this.count = this.length - 1;
                        this.ele.style.left = -this.count * this.w + "px";
                    } else {
                        this.count = this.length;
                    }
                }

                this.count--;
                // move(this.ele, -this.count * this.w);
                this.doSomething();
            }.bind(this);
            // 向右
            arrows[1].onclick = function () {
                // 临界值判断
                if (this.count == this.length - 1) {
                    if (this.setting.loop) {
                        // 将元素定位到第一张，往后移动
                        this.count = 0;
                        this.ele.style.left = "0px";
                    } else {
                        this.count = -1;
                    }
                }

                this.count++;
                // move(this.ele, -this.count * this.w);
                this.doSomething();
            }.bind(this);
        },
        // 初始化小点
        initDots(){
            // 根据展示内容的个数添加小点
            var length = this.setting.loop ? this.length - 1 : this.length;
            var str = "";
            for(var i = 0; i < length; i ++){
                str += "<li data-index='"+ i +"'></li>";
            }
            str = str.replace("li", "li class='act'");
            var dots = document.querySelector(this.setting.pagination.el);
            dots.innerHTML = str;

            // 小点的点击事件，委托
            dots.onclick = function (){
                // 判断点击的是否是选择元素
                if(event.target.tagName == "LI"){
                    this.count = event.target.dataset.index;
                    // 交换类名，更改激活样式
                    // 元素运动
                    this.doSomething();
                }
            }.bind(this);
        },
        // 更改小点激活样式，元素运动的公共函数
        doSomething(){
            // 更改激活
            document.querySelector("li.act").classList.remove("act");
            // 当前小点添加
            var dots = document.querySelector(this.setting.pagination.el);
            dots.children[this.count%dots.children.length].classList.add("act");
            // 元素运动
            move(this.ele, -this.count * this.w);
        },
        // 开启自动轮播
        auto(){
            this.box.onmouseenter = function (){
                // this => this.box
                clearInterval(this.timer);
            }
            this.box.onmouseleave = function (){
                this.box.timer = setInterval(function (){
                    document.querySelector(".arrow-r").click();
                }, this.setting.duration);
            }.bind(this);

            
            this.box.timer = setInterval(function (){
                document.querySelector(".arrow-r").click();
            }, this.setting.duration);
            
            
        }
        // move(){

        // }
    });

    // 缓动函数 -> 既可以写在 原型上，也可以写在立即执行函数中作为闭包变量
    function move(ele, target) {
        if (ele.timer) {
            clearInterval(ele.timer);
        }
        ele.timer = setInterval(function () {
            var start = ele.offsetLeft;
            var step = (target - start) / 10;
            if (Math.abs(step) < 1) {
                step = step > 0 ? 1 : Math.floor(step);
            }
            ele.style.left = start + step + "px";
            if (start + step === target) {
                clearInterval(ele.timer);
            }
        }, 1000 / 60);
    }

    // 将构造函数暴露给window对象
    w.Swiper = Swiper;
}(window));